<script setup lang="ts">
interface Props {
   bg?: string;
}

defineProps<Props>();
</script>

<template>
   <div class="goods-list" :style="{backgroundColor:bg}">
      <div class="image">
         <el-skeleton-item variant="image"></el-skeleton-item>
      </div>
      <div class="name">
         <el-skeleton-item></el-skeleton-item>
      </div>
      <div class="info">
         <el-skeleton-item></el-skeleton-item>
      </div>
   </div>
</template>

<style scoped lang="less">
.goods-list {
   width: 306px;
   height: 406px;
   display: flex;
   flex-direction: column;
   align-items: center;

   .image {
      width: 100%;
      height: 306px;
      .el-skeleton__item {
         height: 100%;
      }
   }

   .name {
      width: 250px;
      height: 42px;
      padding: 12px 30px 0 30px;
   }

   .info {
      width: 200px;
      height: 42px;
   }
}
</style>
